<!--
 * @Description:取票码详情
 * @Author: Kerwin
 * @Date: 2025-04-27 17:30:11
 * @LastEditTime: 2025-05-30 12:01:39
 * @LastEditors:  Please set LastEditors
-->
<template>
  <view class="container">
    <view class="bjbox"></view>
    <view class="content">
      <view class="top">
        <view class="yybox" @click="showMap = true">
          {{ showObj.orderThirdParty.cinemaName }}
          <u-image width="55rpx" height="55rpx" :src="adress"></u-image>
        </view>
        <!-- 电影信息 -->
        <view class="ypbox">
          <view class="bt">{{ showObj.orderThirdParty.movieName }}</view>
          <view
            ><text style="margin-right: 20rpx">{{
              showObj.orderThirdParty.showVersionType
            }}</text
            >共{{ showObj.orderProductSkus.length }}张</view
          >
          <view class="hswz">
            <text>{{ showObj.weekName }}</text>
            <text style="margin: 0 20rpx">
              {{ showObj.orderThirdParty.showTime }}
            </text>
            <text>{{ showObj.orderThirdParty.hallName }}</text>
          </view>
          <view>
            <text>{{ showObj.orderThirdParty.seatsInfos }}</text>
          </view>
          <view class="tsbox">
            <view style="margin-right: 30rpx">
              <u-icon name="info-circle" color="#D70208 " size="30"></u-icon
              ><text class="jcwz">不支持退票</text>
            </view>
            <view>
              <u-icon name="info-circle" color="#D70208 " size="30"></u-icon
              ><text class="jcwz">不支持改签</text>
            </view>
          </view>
        </view>
        <!-- 取票二维码 -->
        <view class="smbox">
          <view class="title"> </view>
          <!-- 取票码轮播图 -->
          <view class="ewmGroup">
            <van-button
              :disabled="currentQrIndex === 0"
              size="small"
              @click="prevQr"
              round
              icon="arrow-left"
            >
            </van-button>
            <swiper
              :current="currentQrIndex"
              @change="onQrSwiperChange"
              style="height: 500rpx; width: 500rpx"
              :indicator-dots="false"
              :autoplay="false"
              :circular="false"
            >
              <swiper-item
                v-for="(qpwz, index) in showObj.orderThirdParty.ticketCodes"
                :key="index"
              >
                <view class="qrcode-item">
                  <qrcode
                    :cid="'qrcode-' + index"
                    makeOnLoad
                    :text="qpwz"
                    :size="200"
                    :foregroundColor="showObj.isfy ? '#999' : '#000'"
                  ></qrcode>
                  <view class="fybox">
                    <u-image
                      v-if="showObj.isfy == true"
                      src="../../static/yfy2.png"
                      width="200rpx"
                      height="200rpx"
                    ></u-image>
                  </view>
                  <view class="qrcode-label"
                    >取票码 {{ index + 1 }}/{{
                      showObj.orderThirdParty.ticketCodes.length
                    }}</view
                  >
                </view>
              </swiper-item>
            </swiper>
            <van-button
              :disabled="
                currentQrIndex ===
                showObj.orderThirdParty.ticketCodes.length - 1
              "
              size="small"
              @click="nextQr"
              round
              icon="arrow"
            >
            </van-button>
          </view>
          <view
            style="
              color: orange;
              margin: 20rpx 0;
              text-align: center;
              font-size: 32rpx;
              font-weight: bold;
            "
            >共{{ showObj.orderProductSkus.length }}张电影票</view
          >
          <view class="qpGroup">
            <view
              class="qp"
              v-for="(qpm, index) in showObj.orderThirdParty.ticketCodes"
              :key="index"
              >第{{ index + 1 }}张取票码：{{ qpm }}</view
            >
          </view>
        </view>
        <view style="color: red; text-align: center; padding: 0 20rpx"
          >温馨提示：若有多张电影票可点击左右箭头切换二维码取票，若二维码取票失败可输入取票码进行取票</view
        >
      </view>
      <view class="bottom">
        <view class="hpbox">
          <view class="jq"
            >实付金额￥{{ showObj.totalMoney - showObj.scoreMoney }}</view
          >
          <!-- 点击区域 -->
          <view @click="toggleExpand" class="jcwz">
            结算明细
            <u-icon
              :name="isExpanded ? 'arrow-up' : 'arrow-down'"
              size="14"
            ></u-icon>
          </view>
        </view>
        <!-- 结算明细展开内容-->
        <view class="mxGroups" v-if="isExpanded">
          <view>
            <view>原价</view>
            <view class="hswz">￥{{ showObj.totalMoney }}</view>
          </view>
          <view v-if="shopMode == 4 || shopMode == 6">
            <view>服务费</view>
            <view class="hswz">￥{{ showObj.otherMoney }}</view>
          </view>
          <view>
            <view>{{ enumAll.SHOPMODEL[shopMode] }}抵扣</view>
            <view class="hswz">￥{{ showObj.scoreMoney }}</view>
          </view>
          <view>
            <view>数量</view>
            <view class="hswz">{{ showObj.orderProductSkus.length }}</view>
          </view>
          <view>
            <view>总价</view>
            <view class="hswz"
              >￥{{ showObj.totalMoney - showObj.scoreMoney }}</view
            >
          </view>
        </view>
        <view class="hpbox">
          <view>订单编号</view>
          <view class="hswz">{{ showObj.orderNo }}</view>
        </view>
        <view class="hpbox">
          <view>购买时间</view>
          <view class="hswz">{{ formatTimestamp(showObj.createTime) }}</view>
        </view>
        <view class="hpbox">
          <view>联系方式</view>
          <view class="hswz">{{ showObj.contactNumber }}</view>
        </view>
      </view>
    </view>
  </view>
  <!-- 地图弹出框 -->
  <van-popup
    v-model:show="showMap"
    round
    position="bottom"
    :style="{ height: '30%' }"
  >
    <view class="mapbox">
      <van-button class="btn" @click="openGMap" type="default" v-if="hasYyInfo"
        >高德地图</van-button
      >
      <van-button class="btn" @click="openBMap" type="default" v-if="hasYyInfo"
        >百度地图</van-button
      >
      <van-button class="btn" @click="openTMap" type="default" v-if="hasYyInfo"
        >腾讯地图</van-button
      >
      <van-button class="btn" @click="copyMap" type="default"
        >复制地址</van-button
      >
      <van-button class="btn btn2" type="default" @click="showMap = false"
        >取消</van-button
      >
    </view>
  </van-popup>
  <!-- 错误提示弹框 -->
  <u-popup v-model="showError" height="300rpx" mode="bottom" border-radius="14">
    <view style="padding: 20rpx">
      <view
        style="
          font-size: 36rpx;
          font-weight: bold;
          text-align: center;
          margin-bottom: 30rpx;
        "
        >温馨提示</view
      >
      <view style="margin-right: 20rpx; margin-bottom: 40rpx; color: red">
        该订单因渠道或者影院信息调整等特殊原因失效,会导致取票失败，
        请联系人工客服进行退款。</view
      >
      <view style="text-align: right">
        <u-button type="success" size="mini" @click="handleCallPhone(showObj)"
          >联系客服</u-button
        >
      </view>
    </view>
  </u-popup>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { formatTimestamp } from '@/utils/index'
import { useUserStore, useMovieStore } from '@/store'
import qrcode from '@/components/hy-qrcode'
import adress from '@/static/xfl/adress.svg'
import { enumAll } from '@/api'
import {
  onLoad,
  onShow,
  onReady,
  onPageScroll,
  onUnload
} from '@dcloudio/uni-app'
import {
  IMovieInfo,
  ICinemaInfo,
  ISession
} from '@/packageF/components/movieInterface'
const currentQrIndex = ref(0)
const movieStore = useMovieStore()
const showObj = ref(movieStore.selectedOrder)
const keyword = ref('')
const isExpanded = ref(false)
// 模式类型
const shopMode = ref(JSON.parse(uni.getStorageSync('hyType')).id)
//地图展示
const showMap = ref(false)
// 是否有完整的影院信息，包含经纬度
const hasYyInfo = ref(false)
const showError = ref(false)
const cinameInfo = ref<ICinemaInfo>({
  cinemaAddress: '',
  cinemaId: 0,
  cinemaName: '',
  cinemaPhone: '',
  cityId: 0,
  latitude: 0,
  longitude: 0,
  regionId: 0,
  regionName: '',
  distance: ''
})

onShow(() => {
  // console.log('showObj', showObj.value)
  // showObj.value.orderThirdParty.code存储的是完整的影院信息
  if (showObj.value.orderThirdParty.code) {
    hasYyInfo.value = true
    cinameInfo.value = JSON.parse(showObj.value.orderThirdParty.code)
  } else {
    hasYyInfo.value = false
  }
  // console.log('cinameInfo', cinameInfo.value)
  showObj.value.weekName = uni.getStorageSync('xzWeekName')
  // 处理取票码，进行拼接
  showObj.value.orderThirdParty.ticketCodes = JSON.parse(
    showObj.value.orderThirdParty.ticketCode
  ).map((ele: any) =>
    ele.code.reduce((acc: any, curr: any) => acc + curr.value, '')
  )
  // console.log('ticketCode', showObj.value.orderThirdParty.ticketCodes)
  if (showObj.value.orderThirdParty.cinemaClose == 1) {
    showError.value = true
  } else {
    showError.value = false
  }
})
onUnload(() => {
  uni.removeStorageSync('sessionData')
  uni.removeStorageSync('movieData')
  uni.removeStorageSync('orderNeed')
  uni.removeStorageSync('xzWeekName')
  uni.removeStorageSync('xzCinemaName')
  uni.removeStorageSync('cinemaData')
  uni.removeStorageSync('dqData')
})
// 点击展开或收起
const toggleExpand = () => {
  isExpanded.value = !isExpanded.value
}
//  #region ***************** 处理轮播图 *************************/
// 轮播图切换事件
const onQrSwiperChange = (e: any) => {
  currentQrIndex.value = e.detail.current
}
// 上一张二维码
const prevQr = () => {
  if (currentQrIndex.value > 0) {
    currentQrIndex.value--
  }
}
// 下一张二维码
const nextQr = () => {
  if (
    currentQrIndex.value <
    showObj.value.orderThirdParty.ticketCodes.length - 1
  ) {
    currentQrIndex.value++
  }
}
//  #region ***************** 处理地址跳转*************************/
//高德
const openGMap = () => {
  const { latitude, longitude, cinemaName } = cinameInfo.value
  window.location.href = `https://uri.amap.com/marker?position=${longitude},${latitude}&name=${cinemaName}&coordinate=gaode&callnative=0`
}
//百度
const openBMap = () => {
  const { latitude, longitude, cinemaName } = cinameInfo.value
  window.location.href = `http://api.map.baidu.com/marker?location=${latitude},${longitude}&title=${cinemaName}&output=html`
}
// 腾讯
const openTMap = () => {
  const { latitude, longitude, cinemaName } = cinameInfo.value
  window.location.href = `https://apis.map.qq.com/uri/v1/marker?marker=coord:${latitude},${longitude};title=${cinemaName}`
}
// 复制地址
const copyMap = () => {
  const address = cinameInfo.value.cinemaAddress
    ? cinameInfo.value.cinemaAddress
    : showObj.value.orderThirdParty.cinemaAddress
  uni.setClipboardData({
    data: address,
    success: () => {
      showMap.value = false
      uni.showToast({
        title: '复制成功'
      })
    },
    fail: () => {
      showMap.value = false
      uni.showToast({
        title: '复制失败',
        icon: 'none'
      })
    }
  })
}
// 点击联系客服
const handleCallPhone = (ddItem: any) => {
  let phone = ''
  switch (ddItem.shopMode) {
    case 1:
      phone = '13808042693'
      break
    case 4:
      phone = '18349389439'
      break
    case 6:
      phone = '19141914176'
  }
  // 判断是否为 H5 端
  if (uni.getSystemInfoSync().platform === 'web') {
    // 复制号码到剪贴板
    uni.setClipboardData({
      data: phone,
      success: () => {
        uni.showToast({ title: '号码已复制，请手动拨号', icon: 'none' })
      }
    })
  } else {
    // 非 H5 端，正常唤起拨号
    uni.makePhoneCall({ phoneNumber: phone })
  }
}
</script>

<style lang="scss" scoped>
.container {
  font-size: 24rpx;
  .bjbox {
    width: 750rpx;
    height: 532rpx;
    background-image: url('../../static/qpmbj.png');
    background-position: center center; /* 水平居中 垂直居中 */
    background-repeat: no-repeat;
    background-size: cover; /* 覆盖整个容器 */
  }
  .content {
    position: relative;
    top: -400rpx;
    .top {
      margin: 0 auto;
      width: 702rpx;
      background: #ffffff;
      border-radius: 16rpx;
      margin-bottom: 20rpx;
      padding-bottom: 20rpx;
      .yybox {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20rpx;
        color: #333;
        margin: 0 auto;
        height: 88rpx;
        line-height: 88rpx;
        background: rgba(221, 221, 221, 0.5);
        border-radius: 8rpx 8rpx 0rpx 0rpx;
        margin-bottom: 20rpx;
      }
      .ypbox {
        padding: 0 20rpx;
        border-bottom: 1rpx #979797 dashed;
        margin-bottom: 20rpx;
        > view {
          margin-bottom: 20rpx;
        }
        .bt {
          color: #000;
          font-size: 32rpx;
          font-weight: bold;
        }
        .tsbox {
          display: flex;
          align-items: center;
          padding-left: 40rpx;
        }
      }
      .smbox {
        .ewmGroup {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .qrcode-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            position: relative;
            .fybox {
              position: absolute;
              top: 140rpx;
              left: 160rpx;
              z-index: 1;
            }
            .qrcode-label {
              margin-top: 20rpx;
              font-size: 28rpx;
              color: orange;
            }
          }
          .qrcode-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            margin-top: 20rpx;
            .qrcode-counter {
              font-size: 28rpx;
              color: #666;
            }
          }
        }
        .qpGroup {
          display: flex;
          align-items: center;
          width: 100%;
          min-height: 80rpx;
          overflow-y: scroll;
          flex-wrap: wrap;

          .qp {
            width: 90%;
            padding: 0 10rpx;
            height: 70rpx;
            border-radius: 8rpx;
            border: 2rpx solid #cccccc;
            margin: 0 auto;
            line-height: 68rpx;
            text-align: center;
            color: #000;
            margin-bottom: 20rpx;
          }
        }
      }
    }
    .bottom {
      overflow-y: scroll;
      padding: 20rpx;
      width: 702rpx;
      // min-height: 262rpx;
      background: #ffffff;
      border-radius: 16rpx;
      margin: 0 auto;
      color: #000;
      .hpbox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10rpx;
        .jq {
          font-size: 28rpx;
          font-weight: bold;
        }
      }
      .mxGroups > view {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10rpx;
      }
    }
  }
}
.jcwz {
  font-size: 24rpx;
  font-weight: bold;
  color: #000;
}
.hswz {
  font-size: 24rpx;
  color: #999;
}
.mapbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f7f8fa;

  .btn {
    width: 100%;
    height: 80rpx;
    border: none;
    background-color: #fff;
  }

  .btn2 {
    margin-top: 20rpx;
  }
}
</style>
